<template>
    <div>
      <h1 :style="{opacity}">hello world</h1>
        <ul>
          <li v-for="n in newsList" :key="n.id">
            <span>{{ n.name }}</span>
            <input type="text" :style="{opacity: 1}">
          </li>
        </ul>
    </div>
  </template>
  
  <script>
  export default {
    name: 'MyNews',
    data() {
      return {
        newsList: [
          {
            id: '001',
            name: 'new1'
          },
          {
            id: '002',
            name: 'new2'
          },
          {
            id: '003',
            name: 'new3'
          }
        ],
        opacity: 1
      }
    },
    activated() {
      this.flag = setInterval(() => {
        this.opacity -= 0.1
        if(this.opacity < 0) {
          this.opacity = 1
        }
      }, 100);
    },
    deactivated() {
      clearInterval(this.flag)
    },
    beforeDestroy() {
      console.log('News组件即将被销毁')
    }
  }
  </script>